import React, { useState, useRef } from "react";
import "./css/Login.scss";
import { NavBar, Form, Input, Button, Modal } from "antd-mobile";
import constant from "./common/Constants";
import util from "./common/Util";
import { useNavigate } from "react-router-dom";
/**
 * 用户登录页
 */
function Login() {
  const mobileRef = useRef();
  const inviteCodeRef = useRef();
  const navigate = useNavigate();

  const login = () => {
    const mobile = mobileRef.current.nativeElement.value;
    const inviteCode = inviteCodeRef.current.nativeElement.value;

    var url = constant.baseUrl + "/app/login";
    util.postForm(url, { mobile, inviteCode }, (resultObj) => {
      if (resultObj.code == 0) {
        localStorage.setItem("userId", resultObj.userId);
        localStorage.setItem("token", resultObj.token);
        localStorage.setItem("expire", resultObj.expire);
        navigate("/menuList");
      } else {
        //登录失败
        Modal.alert({
          content: resultObj.message,
          onConfirm: () => {},
        });
      }
    });
  };

  const ret = (
    <div className="Login container">
      <NavBar
        backArrow={false}
        style={{
          "--height": "60px",
        }}
      >
        <div className="nav text-red">用户登录</div>
      </NavBar>
      <Form layout="horizontal">
        <Form.Item label="手机号" name="username">
          <Input ref={mobileRef} placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          label="邀请码"
          extra={
            <div>
              <Button size="mini">发送验证码</Button>
            </div>
          }
        >
          <Input ref={inviteCodeRef} placeholder="请输入邀请码" clearable />
        </Form.Item>
      </Form>
      <Button
        className="summitButton"
        block
        color="primary"
        size="large"
        onClick={login}
      >
        登录
      </Button>
    </div>
  );
  return ret;
}

export default Login;
